<template>
  <view class="order-item">
    <view class="flex-center pi-pd-bottom-26">
      <view>订单编号：{{item.id}}</view>
      <view :class="item.state!==1?'finish':'cotinien'">
        <view>{{ item.stateDisplay}}</view>
        <view>{{showMinutes.min}}</view>
      </view>
    </view>
    <view class="pi-pd-bottom-12 pi-flex">
      <view class="pi-mg-right-32" style="width:120rpx">就餐日期:</view>
      {{dateFormat}}
    </view>
    <view class="pi-pd-bottom-12 pi-flex">
      <view class="pi-mg-right-32" style="width:120rpx">就餐人数:</view>
      {{item.useNumber}}人
    </view>
    <view class="pi-pd-bottom-12 pi-flex">
      <view class="pi-mg-right-32" style="width:120rpx">就餐时间:</view>
      {{timeFormat}}
    </view>
    <view class="pi-pd-bottom-12 pi-flex">
      <view
        class="pi-mg-right-32"
        style="width:120rpx"
      >姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名:</view>
      {{item.memberName}}
    </view>
    <view class="pi-pd-bottom-12 pi-flex">
      <view
        class="pi-mg-right-32"
        style="width:120rpx"
      >手&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp机:</view>
      {{phoneFormat}}
    </view>
    <view class="pi-pd-bottom-12 pi-flex">
      <view class="pi-mg-right-32" style="width:120rpx">提交时间:</view>
      {{item.orderTime}}
    </view>
    <view class="pi-pd-bottom-12 pi-flex">
      <view
        class="pi-mg-right-32"
        style="width:120rpx"
      >备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注:</view>
      {{item.remarks}}
    </view>
    <!-- <view class="pi-pd-bottom-12 pi-flex">
      <view class="pi-mg-right-32">完成时间:</view>
      {{item.phone}}
    </view>-->
    <button class="btn2" @tap="handlePop" v-if="item.state===1">确认预订</button>
    <uni-popup ref="popup" type="center">
      <view class="close-box">
        <view class="close-box-title">确定兑换</view>
        <view class="close-box-btn">
          <view @tap="handlePopClose">取消</view>
          <view @tap="handleUser(item)">兑换</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { changeOrderState } from '../order/api'
import CONSTS from '@/src/consts';
import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      timef: null,
      textDays: 'Wed Dec 25 2019 11:30:08 GMT+0800',
      days: null,
      hours: null,
      minutes: null,
      seconds: null,
      showMinutes: {
        min: null
      }
    }
  },
  components: {
    uniPopup
  },
  mounted () {
    let da = this.$dayjs(new Date()).diff(this.textDays)
    // this.formatDuring(da)
  },
  computed: {

    phoneFormat () {

      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return this.item.phone.replace(reg, "$1****$2");

    },
    dateFormat () {
      return this.$dayjs(this.item.useDate).format('MM月DD日')
    },
    timeFormat () {
      let time = this.$dayjs(new Date()).diff(this.item.orderTime)
      // this.formatDuring(time)

      return this.$dayjs(this.item.useTime).format('HH:mm')
    },
    showTitForMat () {
      switch (this.item.state) {
        case 1:
          return '待确认'
          break;
        case 2:
          return '待使用'
          break;
        case 3:
          return '已取消'
          break;
        case 4:
          return '预定失败'
          break;
        case 5:
          return '已完成'
          break;
      }
    }
  },
  methods: {
    formatDuring (mss) {
      const min = 1800 * 1000 - mss
      this.days = parseInt(mss / (1000 * 60 * 60 * 24));
      this.hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      this.minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      this.seconds = (mss % (1000 * 60)) / 1000;
      if (this.days === 0 && this.hours === 0 && this.minutes < 30 && this.item.state === 1) {
        // this.handleDjs(mss)
      }
    },
    handleDjs (mss) {
      // setInterval(() => {
      //   mss = mss - 1000
      //   this.$set(this.showMinutes, 'min', `${parseInt((mss % (1000 * 60 * 60)) / (1000 * 60))}分${parseInt((mss % (1000 * 60)) / 1000)}`);

      //   console.log(mss)

      // }, 1000)
    },
    handlePopClose () {
      this.$refs.popup.close();
    },
    handleUser (item) {
      this.handleChangeOrderState(item)
      this.$emit('user', item)
    },
    handlePop () {
      this.$refs.popup.open()
    },
    async handleChangeOrderState (item) {
      const params = {
        id: item.id
      }
      try {
        const { data } = await changeOrderState(params)
        this.$emit('change')
        this.$refs.popup.close();
        return this.$utils.common.toast.fail('成功');
      } catch (err) {
        if (err.code !== 200) {
          return this.$utils.common.toast.fail(err.data.message);
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
// @for $i from 1 through 26 {
//   /* font-size */
//   .pi-pd-bottom-#{$i} {
//     padding-bottom: 1rpx * $i;
//   }
// }
.btn2 {
  margin-top: 42rpx;
  width: 642rpx;
  height: 80rpx;
  background: rgba(12, 212, 211, 1);
  opacity: 1;
  border-radius: 10rpx;

  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 80rpx;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}
.close-box {
  &-btn {
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1rpx solid rgba(204, 204, 204, 1);
    view {
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
    }
    view:nth-child(1) {
      border-right: 1rpx solid rgba(204, 204, 204, 1);
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;

      color: rgba(149, 151, 166, 1);
    }
    view:nth-child(2) {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(12, 212, 211, 1);
    }
  }
  &-title {
    padding: 90rpx 0;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(3, 3, 3, 1);
  }
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 540rpx;
  height: 310rpx;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 20rpx;
}
.finish {
  color: rgba(149, 151, 166, 1) !important;
  white-space: nowrap;
}
.cotinien {
  color: #ff191b !important;
  white-space: nowrap;
}
.order-item {
  background-color: #ffffff;
  margin: 34rpx 20rpx;
  padding: 30rpx;
  padding-top: 24rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(3, 3, 3, 1);
  opacity: 1;
  .btn {
    text-align: center;
    width: 172rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(12, 212, 211, 1);
    opacity: 1;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(12, 212, 211, 1);
  }
  .core {
    font-size: 24rpx;
    color: rgba(149, 151, 166, 1) !important;
  }
  .name {
    font-size: 32rpx;
  }
  .flex-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>